// web前端开发工程师实践面试
// 实践任务要求：
// 1. 面试者可以任选以下 动手实践题 中的一个来进行任务实践。
// 2. 请理解功能需求并按技术要求进行任务实践。
// 3. 不需要考虑后端实现，页面可以按自己的审美风格展示，所有操作数据都定义为假数据。
// 4. 请按你自己的的编码风格输出，做好详细的注释，在完成后在Readme中详述代码结构和编码过程。
// 5. 完整任务实践后提交的github pubilc repository，发送url给我们即可。
// 6. 项目部署到vcercel，发送vercel部署的url给我们。
// 7. 实践任务3天内完成提交。

// 动手实践题：

// ---

// 1. 项目需求：“记账管理器”Web应用

// 项目需求：设计并开发一个简单的“记账管理器”Web应用，帮助用户管理日常收支账单。

// - 功能需求：
//   - 用户可以添加、编辑和删除账单，包括账单名称、金额、类别（如：食物、娱乐、交通等）及收入/支出标记。
//   - 支持按月份和类别查看账单汇总。
//   - 首页展示每月支出和收入的总金额，并按类别展示支出统计图（例如饼图或柱状图）。

// - 技术要求：
//   - 使用React和React Hooks来管理组件状态。
//   - 使用Chart.js或D3.js创建收支数据的可视化图表。
//   - 使用React Router创建页面路由（如“账单列表”、“账单详情”、“图表统计”）。
//   - 使用CSS3实现响应式布局，确保在桌面和移动端均能良好展示。

// - 加分项：
//   - 使用Redux或Context API来管理全局状态。
//   - 使用JSON Placeholder API模拟账单数据交互。
//   - 为复杂交互逻辑（如账单分类筛选）使用自定义Hook。


// ---

// 2. 项目需求：“笔记本”Web应用

// 项目需求：设计并开发一个简单的“笔记本”Web应用，帮助用户记录和管理个人笔记。

// - 功能需求：
//   - 用户可以创建、编辑、删除笔记，并为每条笔记设置标签（如：工作、个人、学习）。
//   - 支持按标签或关键字搜索笔记。
//   - 提供标签管理功能，允许用户创建、删除和编辑标签。

// - 技术要求：
//   - 使用React和React Hooks来管理组件状态。
//   - 使用React Router创建页面路由（如“笔记列表”、“笔记详情”、“标签管理”）。
//   - 使用CSS3和媒体查询实现响应式布局，确保在桌面和移动端均能良好展示。
//   - 支持本地存储（Local Storage）功能，实现笔记数据的持久化保存。

// - 加分项：
//   - 使用React Context管理标签的全局状态。
//   - 使用富文本编辑器库（如Quill.js）实现富文本编辑功能。
//   - 实现数据本地存储与恢复，确保页面刷新或浏览器重启后数据仍可访问。


// ---

// 3. 项目需求：“日程提醒”Web应用

// 项目需求：设计并开发一个“日程提醒”Web应用，帮助用户管理和提醒重要日程。

// - 功能需求：
//   - 用户可以创建日程，设置标题、日期、时间、提醒频率（如每日、每周）。
//   - 提供日历视图，用户可以选择日期查看当天所有日程。
//   - 支持定时提醒功能，并在页面顶部弹出提醒框（可使用模拟的定时器）。

// - 技术要求：
//   - 使用React和React Hooks实现状态管理。
//   - 使用React Router进行页面导航，包括“日程列表”、“日历视图”等。
//   - 使用CSS Flexbox或Grid布局，实现桌面和移动端的响应式设计。
//   - 使用Day.js或Moment.js库处理日期和时间逻辑。

// - 加分项：
//   - 使用Redux或Context API管理全局状态。
//   - 使用自定义Hook处理定时提醒的逻辑。
//   - 使用Web Notifications API实现系统级通知（浏览器支持的情况下）。


// ---

// 4. 项目需求：“个人收藏夹”Web应用

// 项目需求：设计并开发一个“个人收藏夹”Web应用，帮助用户管理不同类型的网络资源收藏。

// - 功能需求：
//   - 用户可以收藏和管理不同类型的链接（如文章、视频、书籍等），并添加备注、标签等。
//   - 支持按标签或关键字搜索收藏内容。
//   - 提供拖拽功能，允许用户重新排序收藏项或将收藏项重新分组。

// - 技术要求：
//   - 使用React和React Hooks来管理组件状态。
//   - 使用React Router进行页面导航（如“收藏列表”、“收藏详情”、“标签管理”）。
//   - 使用CSS3和媒体查询实现响应式布局，确保在桌面和移动端均能良好展示。
//   - 使用React DnD库实现拖拽和排序功能。

// - 加分项：
//   - 使用Redux或Context API管理全局状态。
//   - 实现批量导入和导出收藏数据的功能。
//   - 使用Local Storage或IndexedDB进行数据持久化。


// ---

// 5. 项目需求：“在线考试系统”Web应用

// 项目需求：设计并开发一个“在线考试系统”Web应用，允许用户参与在线测验并查看考试结果。

// - 功能需求：
//   - 用户可以选择考试类别和题目数量，开始答题。
//   - 每道题目有选项，支持用户选择答案并在提交后显示正确与否的反馈。
//   - 考试结束后，显示整体答题结果及评分。

// - 技术要求：
//   - 使用React和React Hooks来管理组件状态。
//   - 使用React Router创建页面路由（如“考试类别选择”、“答题页面”、“成绩统计”）。
//   - 使用CSS3和媒体查询设计页面布局，确保在桌面和移动端均能良好展示。
//   - 使用第三方API（如Open Trivia API）获取考试题目数据，模拟API交互。

// - 加分项：
//   - 使用Redux或Context API管理全局状态，确保题目状态在组件间共享。
//   - 实现考试倒计时功能，限制每道题或整场考试的时间。
//   - 使用自定义Hook管理题目计时和选择答案的逻辑。


// ---
// 6、 项目需求：简单的“个人任务管理器”Web应用
// 设计并开发一个简单的“个人任务管理器”Web应用，要求如下：

// - 功能需求：
//   - 用户可以创建、编辑、删除任务，并设置任务优先级。
//   - 每个任务的状态可以是“待办”、“进行中”或“已完成”。
//   - 任务可以按优先级或状态排序。
  
// - 技术要求：
//   - 使用React和React Hooks来管理组件状态。
//   - 使用React Router来创建页面路由（如任务列表页、任务详情页）。
//   - 使用CSS3实现响应式布局，确保在移动端和桌面端均能良好展示。
//   - 使用React的错误边界组件来处理异常。
  
// - 加分项：
//   - 使用Redux或Context API来管理全局状态。
//   - 将前端接口与JSON Placeholder API集成以模拟数据交互。
//   - 在项目中使用AI工具，如GitHub Copilot，提高开发效率并记录使用效果的反馈。

// 首页 列表页  展示所有的任务列表
// 新增页  新增任务
// 任务详情页 展示任务对应的详情